<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>更换头像</span>
    </div>
    <div>
      <!-- 图片，用来展示用户选择的头像 -->
      <img :src="frImg" alt="" />

      <!-- <img :src="frImg" alt="" /> -->

      <!-- 按钮区域 -->
      <div class="btn-box">
        <input
          ref="inputHidden"
          type="file"
          style="display: none"
          name=""
          id=""
          @change="changeImg"
        />
        <el-button type="primary" icon="el-icon-plus" @click="chooseImg"
          >选择图片</el-button
        >
        <el-button
          type="success"
          icon="el-icon-upload"
          :disabled="disabled"
          @click="uploadImg"
          >上传头像</el-button
        >
      </div>
    </div>
  </el-card>
</template>

<script>
import { updateImgApi } from '@/api'
import defaultImg from '@/assets/logo.png'
export default {
  name: 'UserAvatar',
  data () {
    return {
      frImg: '',
      disabled: true
    }
  },
  created () {
    this.frImg = this.$store.state.userInfo.user_pic || defaultImg
  },
  methods: {
    chooseImg () {
      //  触发input type="file" 被点击
      this.$refs.inputHidden.click()
    },

    /* 隐藏域的事件 */
    changeImg (e) {
      console.log(e, 444)
      /* 判断选择的图片尺寸是否超过2M  超过2M  给出提示
      GB=1024MB     1MB=1024KB     1KB=1024B

       */
      const size = e.target.files[0].size //  B
      if (size / 1024 / 1024 > 2) {
        //  超过2M
        this.$message({
          message: '请选择2M以下的图片',
          type: 'error'
        })
        return false
      }

      /*
      1、选择图片之后触发   change
      2、获取图片资源文件   事件对象
      3、展示图片
        3.1 将获取的图片资源转换成base64格式
        3.2  需要使用一个对象帮助我们进行图片转换      new  FileReader()     研究一个对象：三要素【属性+方法+回调函数】
        3.3  调用对象的方法读取文件   readAsDataURL   方法
        3.4  使用对象的事件执行回调函数来监听文件什么时候读取完毕   onload   事件
        3.5  获取转换之后的base64格式的图片  result  属性
       */
      //  2-获取图片资源文件   事件对象
      const file = e.target.files[0]
      //  判断是否选择了图片  有长度就表示选择了有图片===需要解禁按钮
      if (e.target.files.length) {
        this.disabled = false
      }
      // console.log(e, 222333)
      //  3.2  需要使用一个对象帮助我们进行图片转换
      const fs = new FileReader()
      //  3.3  调用对象的方法读取文件   readAsDataURL   方法
      fs.readAsDataURL(file)
      //  3.4  使用对象的事件执行回调函数来监听文件什么时候读取完毕   onload   事件
      fs.onload = () => {
        //   3.5  获取转换之后的base64格式的图片  result  属性
        this.frImg = fs.result
      }
    },
    async uploadImg () {
      //  实现图片上传
      /*
      1、点击按钮
        1.1 发送请求
        1.2 封装函数
        1.3 调用函数并传参数
        1.4 判断请求是否成功
        1.5 刷新用户界面的用户信息 包含图片更新
        1.6 开启按钮禁用
       */

      // 1.3 调用函数并传参数
      const res = await updateImgApi({
        avatar: this.frImg
      })
      //  1.4 判断请求是否成功
      if (res.data.code !== 0) {
        return this.$message({
          message: '密码或者用户名错误',
          type: 'error'
        })
      }
      // 1.5 刷新用户界面的用户信息 包含图片更新
      this.$store.dispatch('userInfoHandle') //  更新左侧菜单用户数据
      //  1.6 开启按钮禁用
      this.disabled = true
      console.log(res, 66)
    }
  }
}
</script>

<style lang="less" scoped>
.btn-box {
  margin-top: 10px;
}
.preview {
  object-fit: cover;
}

img {
  width: 200px;
  height: 200px;
}
</style>
